<template>
    <div class="container row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-sx-12">
        <div class="footer">
          <div class="qq">
            <div class="qq-info">173310145</div>
            <span class="iconfont iconQQ"></span>
          </div>
          <div class="weixin">
            <div class="weixin-info">name54224</div>
            <span class="iconfont iconweixin1"></span>
          </div>
          <div class="copyright">
              <span class="iconfont iconcopyright">李建平</span>
              <span class="iconfont iconshuliangtongji">访问量: {{ webviews }}</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import {request} from "../../axios";

export default {
  name: "Footer",
  data(){
    return {
      webviews:'',
    }
  },
  mounted() {
    request({
      url:'/backend/allaccessinfocount',
      method:'GET',
    }).then(res=>{
      this.webviews = res.data.count;
    })
  }
}
</script>

<style scoped>
.footer{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: rgba(3,233,244,.8);
  padding: 1rem;
}
.qq,.weixin{
  position: relative;
  margin: 2rem;
  margin-bottom: 1rem;
  /*background-color: yellow;*/
  cursor: pointer;
}
.qq:hover,.weixin:hover{
  color: #ee9900;
  box-shadow: 0 0 5px #03e9f4;
}
span{
  position: relative;
  font-size: 2rem;
}
.qq-info,.weixin-info{
  display: none;
  position: absolute;
  width: 100px;
  top: -38px;
  left: -34px;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
  background-color: #ffff00;
  text-shadow: 0 0 5px #03e9f4;
  border-radius: 10px;
}
.copyright{
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.copyright span{
  text-shadow: 0 0 5px #03e9f4;
  /*font-weight: bold;*/
  text-shadow: 0 0 5px #ffff00;
  font-size: 1rem;
  margin-right: .5rem;
}
.qq-info::before,.weixin-info::before{
  content: "";
  position: absolute;
  border: 10px solid transparent;
  border-top-color: #ffffff;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
.qq:hover .qq-info,
.weixin:hover .weixin-info{
  display: block;
}

</style>